<template>
	<div>
		<SearchInput v-model="state.searchContent" class="mb10" :search="focusList" />
		<el-scrollbar height="580" ref="listRef">
			<div class="list">
				<!-- 拖拽需要添加 move 为class -->
				<div class="fixedList">
					<div v-for="(i, index) in state.fixedList" :class="`handle_item move`">
						<div>
							<el-icon class="mr10">
								<Sort />
							</el-icon>
							{{ i.name }}
						</div>
						<div class="right_handle">
							<el-tooltip class="box-item" effect="dark" content="隐藏" placement="top-start">
								<el-icon @click="deleteItem(i)" v-if="!i.disabled">
									<CircleClose />
								</el-icon>
							</el-tooltip>
							<el-tooltip class="box-item" effect="dark" content="置顶" placement="top-start">
								<el-icon @click="setTopping(i)">
									<Top />
								</el-icon>
							</el-tooltip>
							<el-tooltip class="box-item" effect="dark" content="固定" placement="top-start">
								<el-icon @click="focusItem(i, index)" :class="i.fixed ? 'show' : ''">
									<Lock />
								</el-icon>
							</el-tooltip>
						</div>
					</div>
				</div>
				<div class="unFixedList">
					<template v-if="state.list.length > 0">
						<div v-for="(i, index) in state.list" :class="`handle_item move`">
							<div>
								<el-icon class="mr10">
									<Sort />
								</el-icon>
								{{ i.name }}
							</div>
							<div class="right_handle">
								<el-tooltip class="box-item" effect="dark" content="隐藏" placement="top-start">
									<el-icon @click="deleteItem(i)" v-if="!i.disabled">
										<CircleClose />
									</el-icon>
								</el-tooltip>
								<el-tooltip class="box-item" effect="dark" content="置顶" placement="top-start">
									<el-icon @click="setTopping(i)">
										<Top />
									</el-icon>
								</el-tooltip>
								<el-tooltip class="box-item" effect="dark" content="固定" placement="top-start">
									<el-icon @click="focusItem(i, index)" :class="i.fixed ? 'show' : ''">
										<Lock />
									</el-icon>
								</el-tooltip>
							</div>
						</div>
					</template>
					<template v-else>
						<el-empty description="暂无数据" />
					</template>
				</div>
			</div>
		</el-scrollbar>
	</div>
</template>

<script lang="ts" setup name="sortable">
import Sortable from 'sortablejs';

import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

const listRef = ref();

const emit = defineEmits(['sort', 'deleteItem', 'setTopping']);

const props = defineProps({
	list: {
		type: Array,
		default: [],
	},
});

const state = reactive({
	allList: [],
	fixedList: [],
	list: [],
	listFixedForm: [],
	listForm: [],
	searchContent: '',
});

onMounted(() => {
	state.fixedList = props.list.filter((i) => i.fixed == 'left');

	state.listFixedForm = state.fixedList.map((item) => {
		return item;
	});

	state.list = props.list.filter((i) => i.fixed != 'left');

	state.listForm = state.list.map((item) => {
		return item;
	});

	rowDrop();
});

const rowDrop = () => {
	const list = proxy.$refs.listRef;

	// 非固定的列表
	const listBody = list.$el.querySelector('.unFixedList');

	Sortable.create(listBody, {
		handle: '.move',
		animation: 300,
		ghostClass: 'ghost',
		onEnd({ newIndex, oldIndex, from, to }) {
			const data = [...state.listForm];

			data.splice(newIndex, 0, data.splice(oldIndex, 1)[0]);

			const newArray = data.slice(0);

			state.listForm = newArray;

			emit('sort', state.listFixedForm.concat(state.listForm));
		},
	});

	// 固定的列表

	const listFixedBody = list.$el.querySelector('.fixedList');

	Sortable.create(listFixedBody, {
		handle: '.move',
		animation: 300,
		ghostClass: 'ghost',
		onEnd({ newIndex, oldIndex, from, to }) {
			const data = [...state.listFixedForm];

			data.splice(newIndex, 0, data.splice(oldIndex, 1)[0]);

			const newArray = data.slice(0);

			state.listFixedForm = newArray;

			emit('sort', state.listFixedForm.concat(state.listForm));
		},
	});
};

const focusList = () => {
	if (state.searchContent == '') {
		state.list = state.fullSearchList;
		return;
	} else {
		state.list = state.fullSearchList.filter((i) => i.name.includes(state.searchContent));
	}
};

// 左固定
const focusItem = (data, index) => {
	data.fixed = data.fixed ? false : 'left';
	if (data.fixed) {
		state.listFixedForm.push(data);
		state.fixedList.push(data);
		state.listForm.splice(index, 1);
		state.list.splice(index, 1);
	} else {
		state.listForm.unshift(data);
		state.list.unshift(data);
		state.listFixedForm.splice(index, 1);
		state.fixedList.splice(index, 1);
	}
	console.log(state.list, state.fixedList, state.listForm, state.listFixedForm);

	// state.listForm = state.listForm.map(i => {
	//     if (i.name == data.name) {
	//         i.fixed = i.fixed ? false : 'left'
	//     }
	//     return i
	// })
	// emit('sort', state.listFixedForm.concat(state.listForm))
};

const deleteItem = (data) => {
	emit('deleteItem', data);
};
const setTopping = (data) => {
	emit('setTopping', data);
};
watch(
	() => props.list,
	(val) => {
		console.log(val,2222)
		state.fixedList = val.filter((i) => i.fixed == 'left');

		state.listFixedForm = state.fixedList.map((item) => {
			return item;
		});

		state.list = val.filter((i) => i.fixed != 'left').filter((i) => i.name.includes(state.searchContent));
		state.fullSearchList = props.list.filter((i) => i.fixed != 'left');
		state.listForm = state.list.map((item) => {
			return item;
		});
	},
	{
		immediate: true,
		deep: true,
	}
);
</script>

<style lang="scss" scoped>
.handle_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 16px;
	cursor: move;

	.right_handle {
		display: flex;

		i {
			margin-left: 8px;
			cursor: pointer;
			display: none;
		}

		.show {
			display: inline-flex !important;
		}
	}

	&:hover {
		background-color: rgba(0, 91, 245, 0.04);

		> .right_handle {
			// display: flex;

			> i {
				display: inline-flex;

				&:hover {
					color: #2d8cf0;
				}
			}
		}
	}
}
</style>